<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格css</title>
    <style>
        table {
            /*必须指明边框是实线/虚线，颜色，和宽度大小 才能显示*/
            /*三个缺一不可*/
            /* border-style: solid; */
            /* border-color: green; */
            /* border-width: 2px; */

            /*简写*/
            border: 1px green solid;
            width: 500px;
            /*表格的列宽,默认auto,fixed(所有列一样宽,在给某列设置不同的宽就可以定制了)*/
            table-layout: fixed;
            /*控制单元格间距,(0就仅仅贴在一起了)*/
            border-spacing: 0px;
            /*合并相邻单元格边框,collapse合并了，就不会很粗,border-spacing也失效了*/
            /*最外层table边框颜色得听边框大小大的，相同就是听单元格的*/
            border-collapse: collapse;
            /*标题位置*/
            caption-side: top;

        }
        td,th{
            border: 1px orange solid;
        }
        #div1{
            /*不写是transparent*/
            background-color: skyblue;
            border: 2px black solid;
            height: 500px;
            /*如果文件小，会平铺很多个*/
            background-image: url("../images/test1.png");
            /*让背景图片不重复*/
            background-repeat: no-repeat;
            /*设置背景图片位置,只写一个，另一个就居中了*/
            /* background-position: right top; */
            /*相对于左上角,第一个是向左，第二个是向下 */
            background-position: 100px 50px;

            /* 也可以用background 写复合属性，注意，写的时候背景颜色如果没有就是transparent*/
        }
        /*不仅仅是表格，行内元素也可以使用*/
    </style>
</head>
<body>
<div id="div1"> div 11</div>
<table>
    <caption>人员信息</caption>
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>政治面貌</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
        <td>团员</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>18</td>
        <td>女</td>
        <td>团员</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>18</td>
        <td>女</td>
        <td>党员</td>
    </tr>
    </tbody>

</table>
</body>
</html>